<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示移动端分类列表无需js计算的纯css效果布局</title>
</head>
<style>
     /*全局盒模型 start*/
    * {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        outline: 0;
        box-sizing: border-box;
        padding:0;
        margin:0;
    }
    /*全局盒模型 end*/
    /*此为解决苹果手机对input按钮编译不一样的问题 start*/
    input[type=button], input[type=submit], input[type=file], button { 
        cursor: pointer; -webkit-appearance: none; 
    } 
    input::-webkit-input-placeholder { /* WebKit browsers */  
        color: #999;  
    }  
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
        color: #999;  
    }  
    input::-moz-placeholder { /* Mozilla Firefox 19+ */  
        color: #999;  
    }  
    input:-ms-input-placeholder { /* Internet Explorer 10+ */  
        color: #999;  
    }
    /*此为解决苹果手机对input按钮编译不一样的问题 end*/
    body {
        color: #333;
        font-size: 13px;
        background-color: #f5f5f5;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: normal;
        margin: 0;
    }
    .border-b {
        border-bottom: 1px solid #e0e0e0;
    }
    .p-rel {
        position: relative;
    }
    .p-abs {
        position: absolute;
        left: 0;
        top: 0;
    }
    .wx-back, .wx-home {
        background-repeat:no-repeat;
        width:2.5rem;
        height:2.5rem;
        background-size:1.4rem 1.4rem;
        background-position:center center;
    }
    .wx-header {
        line-height: 2.5rem;
        top: 0;
        position: fixed;
        width: 100%;
        z-index: 100;
        left: 0;
        background-color: #fff;

    }
    .wx-header .p-rel {
        padding: 0 2.5rem;
    }
    .wx-header .wx-back {
        position:absolute;
        left:0;
        top:0;
    }
    .wx-header .wx-home {
        position:absolute;
        right:0;
        top:0;
    }
    .wx-header h1 {
        text-align:center;
        height: 2.5rem;
        overflow: hidden;

    }
    .wx-back {
        background-image: url('');
    }
    .wx-home {
        background-image: url('');
    }
    .imitate-href {
        cursor: pointer;
    }
    .col-main, .indexnav-main{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        padding: 0.5rem;
        background-color: #fff;
    }
    .col-main .item, .indexnav-main .item {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        text-align: center;
        padding: 0 0.5rem;
    }
    .cart-s-abs {
        background-color: #ee455e;
        border-radius: 0.5em 0.5em 0.5em 0;
        color: #fff;
        display: inline-block;
        font-size: 0.825em;
        left: 50%;
        margin-left: 0.5em;
        line-height: 0.825em;
        min-width: 0.825em;
        padding: 1px 2px;
        position: absolute;
        text-align: center;
        top: -0.25em;
    }
    .wx-footer {
        position: fixed;
        bottom:0;
        left: 0;
        width: 100%;
        z-index: 100;
        font-size: 13px;
    }
    .wx-footer.col-main {
        padding:0;
    }
    .wx-footer .item {
        padding:0.5rem;
    }
    .wx-footer .item p {
        padding-top:1.5rem;
        background-position:top center;
        background-size:1.5rem 1.5rem;
        background-repeat:no-repeat;
        color:#999999;
        line-height:1rem;
    }
    .wx-footer .item1 p {
        background-image:url('');
    }
    .wx-footer .item2 p {
        background-image:url('');
    }
    .wx-footer .item3 p {
        background-image:url('');
    }
    .wx-footer .item4 p {
        background-image:url('');
    }
    .page-index .wx-footer .item1 p {
        color:#2e3ae5;
        background-image:url('');
    }
    .page-channer .wx-footer .item2 p {
        color:#2e3ae5;
        background-image:url('');
    }
    .page-mycart .wx-footer .item3 p {
        color:#2e3ae5;
        background-image:url('');
    }
    .page-mycenter .wx-footer .item4 p {
        color:#2e3ae5;
        background-image:url('');
    }
    .wx-footer ~ .wx-container {
        border-bottom: 3.5rem solid transparent;
    }
    .wx-header ~ .wx-container {
        border-top: 2.5rem solid transparent;
    }
    html, body, .wx-container, .menu-box { 
        height: 100%;
    }
    .menu-box { 
        height: 100%;
        padding-left: 5rem;
    }
    .menu-box .menu-box-ltr, .menu-box .menu-box-rtl {
        height: 100%;
        overflow-y: auto;
    }
    .menu-box .menu-box-ltr p{
        padding: 0.8rem 0.5rem;
        background-color: #f5f5f5;
        border-right: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        text-align: center;
    }
    .menu-box .menu-box-ltr p.on{
        background-color: #fff;
    }
    .menu-box .menu-box-ltr{
        width: 5rem;
    }
    .menu-box .menu-box-rtl{
        padding: 0.5rem;
        background-color: #fff;
    }
</style>
<body class="page-channer">
    <header class="wx-header border-b o-header">
        <div class="p-rel">
            <i class="wx-back" onclick="history.go(-1)"></i>
            <h1 class="page-title">会员登录</h1>
            <i class="wx-home imitate-href" data-href="#"></i>
        </div>
    </header>
    <footer class="wx-footer col-main">   
        <div class="item item1 imitate-href touch-cursor" data-href="#">
            <p>首页</p>
        </div>
        <div class="item item2 imitate-href touch-cursor" data-href="#">
            <p>下单</p>
        </div>
        <div class="item item3 imitate-href touch-cursor" data-href="#">
            <p class="p-rel">购物车<span id="sQuantity" class="cart-s-abs">0</span></p>
        </div>
        <div class="item item4 imitate-href touch-cursor" data-href="#">
            <p>我的</p>
        </div>
    </footer>
    <section class="wx-container">
        <div class="menu-box p-rel o-hidden">
            <div class="menu-box-ltr p-abs">
                <p><span>左侧开始</span></p>
                <p class="on"><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>分类名称</span></p>
                <p><span>左侧结束</span></p>
            </div>
            <div class="menu-box-rtl">
                <p><span>开始</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>内容</span></p>
                <p><span>结束</span></p>
            </div>
        </div>
    </section>
</body>
</html>